<template>
  <div>
    <el-tabs
      :tab-position="tabPosition"
      v-model="qqq"
      @tab-click="showhide"
      class="Extabs"
      style="width:100%"
    >
      <el-tab-pane class="custView">
        <span slot="label">
          <div style="background-color:#fff;text-align:center;height:30px;margin-bottom:10px">
            <img src="/Images/crm/cust.png" alt="客户视图" title="客户视图" class="img" />
          </div>
        </span>
        <el-tabs v-model="actname">
          <el-tab-pane label="客户信息" name="first">
            <div class="filter-container filter-params-crm filter-params-sub">
              <el-form label-position="right" disabled="true">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="客户姓名">
                      <el-input v-model="custName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="证件类型">
                      <el-input v-model="credTypeName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="证件号码">
                      <el-input v-model="credNo"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="邮政编码">
                      <el-input v-model="addrZip"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="私人电话">
                      <el-input v-model="phone"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="家庭电话">
                      <el-input v-model="homeTel"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="办公电话">
                      <el-input v-model="officeTel"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="电子邮箱">
                      <el-input v-model="email"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="user">
                    <el-form-item label="职业">
                      <el-input v-model="jobName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="职位">
                      <el-input v-model="postName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="公司">
                      <el-input v-model="compName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="教育背景">
                      <el-input v-model="degreeName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" id="addr-col">
                    <el-form-item label="地址">
                      <el-input v-model="addr"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" id="addr-col">
                    <el-form-item label="客户标签">
                      <div style="text-align:left;">
                        <el-tag :key="tag" v-for="tag in dynamicTags">{{tag}}</el-tag>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="车辆信息" name="second">
            <div>
              <Table :tabledatas="tableDatasCLIF" ref="tableCLIF" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="沟通记录" name="third">
            <div>
              <Table :tabledatas="tableDatasGT" ref="tableGT" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="线索信息" name="five" v-if="isclue">
            <div>
              <Table :tabledatas="tableDatasXS" ref="tableXS" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <div style="background-color:#fff;text-align:center;height:30px;margin-bottom:10px">
            <img src="/Images/crm/talk.png" alt="话术" title="话术" class="img" />
          </div>
        </span>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <div style="background-color:#fff;text-align:center;height:30px;margin-bottom:10px">
            <img src="/Images/crm/know.png" alt="知识库" title="知识库" class="img" />
          </div>
        </span>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <div style="background-color:#fff;text-align:center;height:30px;margin-bottom:10px">
            <img src="/Images/crm/map.png" alt="地图查询" title="地图查询" class="img" />
          </div>
        </span>
      </el-tab-pane>
      <el-tab-pane class="complainView">
        <span slot="label">
          <div style="background-color:#fff;text-align:center;height:30px;margin-bottom:10px">
            <img src="/Images/crm/complain.png" alt="咨询" title="咨询" class="img" />
          </div>
        </span>
        <el-tabs v-model="activeName">
          <el-tab-pane label="处理记录" name="first">
            <div>
              <Table :tabledatas="tableDatasCL" @clickedit="touchFileDialog(row)" ref="tableCL" />
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="协助记录" name="second">
            <div>
              <Table :tabledatas="tableDatasXZ" ref="tableXZ" />
            </div>
          </el-tab-pane>-->
          <el-tab-pane label="回访记录" name="second">
            <div>
              <Table :tabledatas="tableDatasHF" ref="tableHF" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-row>
   <el-col :span="24">
    <i class="el-icon-contactTel"></i>
   </el-col>
    </el-row>-->
    <consultAttach
      :dynamicEditRowData="consultAttachRowData"
      :popupsVisible="consultAttachPopupsVisible"
      :key="consultAttachPopupsKey"
      :popupsState="consultAttachPopupsState"
      @close="close"
      ref="consultAttach"
    ></consultAttach>
  </div>
</template>
<script>
import Table from "@/components/crm/table/Table";
import { crmApis } from "@/api/apiList/crm";
import { requestAPI } from "@/api/commonRequest";
import consultAttach from "@/components/crm/crmEjectWindows/consultAttach/consultAttach";

export default {
  name: "ExtendedInfo",
  components: {
    Table,
    consultAttach
  },
  props: {
    queryParams: {
      serverOrder: {
        type: String,
        default: ""
      }
    }
  },
  data() {
    return {
      //弹窗属性
      consultAttachPopupsVisible: false,
      consultAttachPopupsState: "",
      consultAttachPopupsKey: "",
      isclue: false,
      tabPosition: "right",
      qqq: "eee",
      actname: "first",
      activeName: "first",
      custName: "",
      credTypeName: "",
      credNo: "",
      phone: "",
      homeTel: "",
      email: "",
      officeTel: "",
      addrZip: "",
      addr: "",
      jobName: "",
      postName: "",
      degreeName: "",
      compName: "",
      vin: "",
      custNo: "",
      tableDatasCL: {
        colnames: [
          { label: "组织", value: "orgName" },
          { label: "处理人", value: "dealPerson" },
          { label: "处理时间", value: "dealTime" },
          { label: "执行操作", value: "dealStatus" },
          { label: "处理内容", value: "remark" }

          //{ label: "附件", value: "touchStatusName" }
        ],
        isoperat: false,
        isTouchFile: true,
        haveTouchFile: true,
        queryObj: {
          // .后面是服务编码，.前面固定写死
          apiConfig: crmApis.csBuDealRecordQueryFindAll,
          apiQueryRow: [
            "orgName",
            "dealPerson",
            "dealTime",
            "dealStatus",
            "remark"
          ],
          params: {
            oemCode: this.$store.getters.orgInfo.OEM_CODE,
            groupCode: this.$store.getters.orgInfo.GROUP_CODE,
            serverOrder: "1"
          }
        }
      },
      tableDatasXZ: {
        isoperat: false,
        colnames: [
          { label: "申请日期", value: "applyTime" },
          { label: "申请人", value: "applyPersonName" },
          { label: "申请内容", value: "helpDes" },
          { label: "协助处理人", value: "helpPersonName" },
          { label: "协助处理部门", value: "touchStatusName" },
          //{ label: "回访类型", value: "reviewTypeName" },
          { label: "处理时间", value: "helpTime" },
          { label: "处理内容", value: "dealDes" }
        ],
        queryObj: {
          // .查询条件缺少责任人(姓名)  网格列也缺少责任人(姓名)
          apiConfig: crmApis.csBuComplaintHelpQueryFindAll,
          apiQueryRow: [
            "applyTime",
            "applyPersonName",
            "helpDes",
            "serverFullClassName",
            "helpPersonName",
            "helpTime",
            "dealDes"
          ],
          params: {
            oemCode: this.$store.getters.orgInfo.OEM_CODE,
            groupCode: this.$store.getters.orgInfo.GROUP_CODE,
            serverOrder: ""
          }
        }
      },
      tableDatasHF: {
        isoperat: false,
        colnames: [
          { label: "回访单号", value: "reviewCode" },
          { label: "来源单号", value: "sourceCode" },
          { label: "来源单据类型", value: "billTypeName" },
          { label: "联系电话", value: "reviewAddr" },
          { label: "接触状态", value: "touchStatusName" },
          //   { label: "备注", value: "remark" },
          //{ label: "回访类型", value: "reviewTypeName" },
          { label: "建单时间", value: "plantReviewTime" },
          { label: "回访内容", value: "reviewDesc" },
          { label: "下次回访时间", value: "reviewTimes" }
        ],
        queryObj: {
          // .后面是服务编码，.前面固定写死
          apiConfig: crmApis.getCsBuReviewRecordList,
          apiQueryRow: [
            "reviewCode",
            "sourceCode",
            "reviewAddr",
            "touchStatusName",
            "reviewTimes",
            "billTypeName",
            "reviewDesc",
            "plantReviewTime",
            "nextReviewTime"
            //"billTypeName"
          ],
          params: {
            oemCode: this.$store.getters.orgInfo.OEM_CODE,
            groupCode: this.$store.getters.orgInfo.GROUP_CODE,
            serverOrder: ""
          }
        }
      },
      tableDatasCD: {
        isoperat: false,
        colnames: [
          { label: "接触时间", value: "reviewCode" },
          { label: "接触类型", value: "serverOrder" },
          { label: "接触方式", value: "clueType" },
          { label: "单号", value: "contactTel" },
          { label: "我方责任人", value: "touchStatusName" },
          { label: "备注", value: "remark" },
          //{ label: "回访类型", value: "reviewTypeName" },
          { label: "处理记录", value: "createdDate" }
        ],
        queryObj: {
          // .后面是服务编码，.前面固定写死
          apiConfig: crmApis,
          apiQueryRow: [
            "reviewCode",
            "serverOrder",
            "clueType",
            "contactTel",
            "touchStatusName",
            "remark",
            "createdDate",
            "reviewDesc",
            "nextCallbackDate"
          ],
          params: {
            // oemCode:this.$store.getters.orgInfo.OEM_CODE,
            // groupCode:this.$store.getters.orgInfo.GROUP_CODE,
            serverOrder: ""
          }
        }
      },
      tableDatasXS: {
        isoperat: false,
        colnames: [
          { label: "线索单号", value: "serverOrder" },
          { label: "客户姓名", value: "custName" },
          { label: "单据状态", value: "statusName" },
          { label: "客户性别", value: "genderName" },
          { label: "联系电话", value: "contactTel" },
          { label: "意向级别", value: "clueLevelCode" },
          { label: "活动名称", value: "actionName" },
          { label: "信息来源", value: "clueSource" }
        ],
        queryObj: {
          // .后面是服务编码，.前面固定写死
          //apiConfig: crmApis.clueServerQueryFromDlr,
          apiConfig: crmApis.clueServerQueryFromHeadquarters,
          apiQueryRow: [
            "serverOrder",
            "custName",
            "statusName",
            "genderName",
            "contactTel",
            "clueLevelCode",
            "actionName",
            "clueSource"
          ],
          params: {
            // oemCode:this.$store.getters.orgInfo.OEM_CODE,
            // groupCode:this.$store.getters.orgInfo.GROUP_CODE,
            serverOrder: "",
            //statusArray: ["10", "20", "21", "30", "31", "40", "50"],
            statusArray: ["0", "1", "3", "4", "5"],
            handleCode: "0"
          }
        }
      },
      tableDatasGT: {
        isoperat: false,
        colnames: [
          { label: "沟通时间", value: "createdDate" },
          { label: "业务类别", value: "serverTypeName" },
          { label: "大类", value: "bigClassName" },
          { label: "单据状态", value: "statusName" },
          { label: "沟通次数", value: "addQty" },
          { label: "摘要", value: "serverTitle" },
          //{ label: "回访类型", value: "reviewTypeName" },
          { label: "责任专营店", value: "dutyDlrName" }
        ],
        queryObj: {
          // .后面是服务编码，.前面固定写死
          apiConfig: crmApis.custViewCsServerQueryFindAll,
          apiQueryRow: [
            "createdDate",
            "serverTypeName",
            "bigClassName",
            "statusName",
            "addQty",
            "serverTitle",
            "dutyDlrName"
          ],
          params: {
            // oemCode:this.$store.getters.orgInfo.OEM_CODE,
            // groupCode:this.$store.getters.orgInfo.GROUP_CODE,
            dlrCustNo: ""
          }
        }
      },
      tableDatasLC: {
        isoperat: false,
        colnames: [
          { label: "部门", value: "reviewCode" },
          { label: "科室", value: "serverOrder" },
          { label: "操作人", value: "clueType" },
          { label: "执行操作", value: "contactTel" },
          { label: "操作时间", value: "touchStatusName" },
          { label: "处理记录", value: "remark" }
        ],
        queryObj: {
          // .后面是服务编码，.前面固定写死
          apiConfig: crmApis,
          apiQueryRow: [
            "reviewCode",
            "serverOrder",
            "clueType",
            "contactTel",
            "touchStatusName",
            "remark",
            "createdDate",
            "reviewDesc",
            "nextCallbackDate"
          ],
          params: {
            // oemCode:this.$store.getters.orgInfo.OEM_CODE,
            // groupCode:this.$store.getters.orgInfo.GROUP_CODE,
            serverOrder: ""
          }
        }
      },
      tableDatasCLIF: {
        isoperat: false,
        colnames: [
          { label: "品牌", value: "carBrandName" },
          { label: "车牌号", value: "carLicenseNo" },
          { label: "VIN码", value: "vin" },
          { label: "车系", value: "carSeriesCn" },
          { label: "车型", value: "smallCarTypeCn" },
          { label: "颜色", value: "carColorName" },
          { label: "销售网点", value: "saleDlrShortName" },
          { label: "购车日期", value: "invoiceDate" }
        ],
        queryObj: {
          // .后面是服务编码，.前面固定写死
          apiConfig: crmApis.carViewCarBaseInfoQueryFindAll,
          apiQueryRow: [
            "carBrandName",
            "carLicenseNo",
            "vin",
            "carSeriesCn",
            "smallCarTypeCn",
            "carColorName",
            "saleDlrShortName",
            "invoiceDate"
          ],
          params: {
            //oemCode:this.$store.getters.orgInfo.OEM_CODE,
            //groupCode:this.$store.getters.orgInfo.GROUP_CODE,
            //serverOrder: ""
            vin: ""
          }
        }
      },
      dynamicTags: []
    };
  },
  //   updated(){
  //       this.$nextTick(()=>{
  //           this.initcustinfo();
  //       });
  //   },
  methods: {
    showhide(ele) {
      let node = document.getElementById(ele.$el.id);
      if (node.style.display == "none") {
        node.style.display = "block";
      } else {
        node.style.display = "none";
      }
    },
    initcustinfo() {
      let that = this;
      let queryObj = {
        // api配置
        apiConfig: crmApis.custViewCustExtentQueryFindAll,
        // 需要调用的API服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: [
              "custName",
              "credTypeName",
              "email",
              //邮箱
              "credNo",
              "addrZip",
              "phone",
              "officeTel",
              "homeTel",
              "addr",
              "degreeName",
              "postName",
              "compName",
              "jobName",
              "custTag"
            ]
          }
        ],
        //条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          pageSize: 10,
          pageIndex: 1,
          //当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: {
            dlrCustNo: that.custNo
            //oemCode: this.$store.getters.orgInfo.OEM_CODE,
            //groupCode: this.$store.getters.orgInfo.GROUP_CODE
          }
        }
      };
      //转换了中台请求格式数据
      var paramD = that.$getParams(queryObj);
      requestAPI(paramD).then(response => {
        if (response.result == "1") {
          let results = response.rows[0];
          for (let key in results) {
            that[key] = results[key];
          }
          if (results.custTag) {
            this.dynamicTags = results.custTag.split(",");
          }
        } else {
          that.$crmcf.showMessages(
            that,
            "error",
            response.msg
          );
        }
      });
    },
    initCL() {
      let that = this;
      that.tableDatasCL.queryObj.params.serverOrder =
        that.queryParams.serverOrder;
      that.tableDatasXZ.queryObj.params.serverOrder =
        that.queryParams.serverOrder;
      that.tableDatasHF.queryObj.params.serverOrder =
        that.queryParams.serverOrder;
      that.tableDatasXS.queryObj.params.serverOrder =
        that.queryParams.serverOrder;
      that.tableDatasCLIF.queryObj.params.vin = that.vin;
      that.tableDatasGT.queryObj.params.dlrCustNo = that.custNo;
      if (that.$refs.tableXS) {
        that.$refs.tableXS.getData();
      }
      if (that.vin) {
        that.$refs.tableCLIF.getData();
      }
      if (that.custNo) {
        that.$refs.tableGT.getData();
      }
      if (that.queryParams.serverOrder) {
        that.$refs.tableCL.getData();
        that.$refs.tableHF.getData();
      }
      // if (that.queryParams.serverOrder) {
      //   that.$refs.tableXZ.getData();
      // }
    },
    //查看附件
    touchFileDialog(row) {
      let that = this;
      debugger;
      that.$refs.consultAttach.filePopupsVisible=true
      // that.consultAttachPopupsState = "edit";
      // that.consultAttachPopupsKey = that.$utils.generateId();

      // that.consultAttachPopupsVisible = true;
    }
  }
};
</script>
<style>
.custView {
  position: relative;
}
.complainView {
  position: relative;
}
.custView > div {
  position: fixed;
  width: 900px;
  height: 300px;
  z-index: 999;
  right: 100px;
  background: white;
}
.complainView > div {
  position: fixed;
  width: 900px;
  height: 300px;
  z-index: 999;
  right: 100px;
  background: white;
  overflow: auto;
}
.hide {
  display: none;
}
.filter-params-crm #addr-col label {
  width: 7%;
}
.filter-params-crm #addr-col .el-input {
  width: 93%;
}
.filter-params-crm .user label {
  overflow: inherit;
}
.img {
  width: 100%;
  height: 100%;
}
.Extabs .el-tabs__header {
  margin-top: 10px;
  margin-right: 20px;
  background: #fff;
}
.Extabs .el-tabs__item {
  margin-bottom: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
